<template>
  <div class="demo">
    <div class="demo-title">多表单联动</div>
    <div class="demo-content">
      <Form ref="formRef" :model="formState" name="form_context" v-bind="layout" @finish="onFinish">
        <Form.Item
          name="group"
          label="Group Name"
          :rules="[{ required: true, message: 'Please input group name!' }]"
        >
          <Input v-model:value="formState.group" />
        </Form.Item>
        <Form.Item label="User List">
          <template v-if="formState.users.length">
            <ul>
              <template v-for="user in formState.users" :key="user.key">
                <li class="user">
                  <Avatar>
                    <template #icon><UserOutlined /></template>
                  </Avatar>
                  {{ user.name }} - {{ user.age }}
                </li>
              </template>
            </ul>
          </template>
          <template v-else>
            <Typography.Text class="ant-form-text" type="secondary">
              (<SmileOutlined />No user yet. )
            </Typography.Text>
          </template>
        </Form.Item>
        <Form.Item v-bind="tailLayout">
          <Button html-type="submit" type="primary">Submit</Button>
          <Button html-type="button" style="margin: 0 8px" @click="visible = true">Add User</Button>
        </Form.Item>
      </Form>
      <Modal v-model:visible="visible" title="Basic Drawer" @ok="onOk">
        <Form ref="modalFormRef" :model="modalFormState" layout="vertical" name="userForm">
          <Form.Item name="name" label="User Name" :rules="[{ required: true }]">
            <Input v-model:value="modalFormState.name" />
          </Form.Item>
          <Form.Item name="age" label="User Age" :rules="[{ required: true }]">
            <InputNumber v-model:value="modalFormState.age" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch, toRaw } from 'vue';
  import { SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
  import Avatar from '@sscd/avatar';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import InputNumber from '@sscd/input-number';
  import Modal from '@sscd/modal';
  import Typography from '@sscd/typography';
  import Form from '@sscd/form';
  import type { FormInstance } from '@sscd/form';
  interface UserType {
    name?: string;
    age?: number;
    key?: number;
  }
  interface FormState {
    group: string;
    users: UserType[];
  }
  const formRef = ref<FormInstance>();
  const modalFormRef = ref<FormInstance>();
  const visible = ref(false);
  const formState = reactive<FormState>({ group: '', users: [] });
  const modalFormState = ref<UserType>({});
  watch(
    () => visible,
    () => {
      modalFormState.value = {};
    },
    { flush: 'post' }
  );
  const onOk = () => {
    modalFormRef.value?.validateFields().then(() => {
      formState.users.push({ ...modalFormState.value, key: Date.now() });
      visible.value = false;
    });
  };
  const onFinish = () => {
    console.log('Finish:', toRaw(formState));
  };
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
</script>
